<template>
	<view class="hotel-order" :class="{order:!show}">
		<!-- #ifdef APP-PLUS -->
		<view class="header">订单</view>
		<!-- #endif -->
		<view class="bg"></view>
		<order @upload="list" class='order' :lists="lists"></order>
		<view v-if="show == 2" class="show2">
			<view class="show_null"><image src="/static/bg/null.png" mode=""></image></view>
			<view class="title">你还没有发布订单哦！</view>
		</view>
		<view v-if="show == 1" class="show1">
			<view class="box">
				<image src="/static/bg/ljrz.png" mode=""></image>
				<view class="btn" @tap="enterprise">立即认证</view>
			</view>
		</view>
	</view>
</template>

<script>
import moment from 'moment';
import order from '@/components/hotel/order/order';
export default {
	data() {
		return {
			show: 0,
			lists: []
		};
	},
	created() {
		this.list();
		this.order();
	},
	methods:{
		order(){
			new Promise(res=>{
				uni.$on('order',function(e){
					res(e)
				})
			}).then(v=>{
				this.lists.forEach(val=>{
					val.id == v ? val.id = null : '';
				})
				this.order();
			})	
		},
		enterprise(){
			/**
			 * 立即认证
			 */
			console.log(1)
			uni.navigateTo({
				url: '/pages/user/set/enterprise'
			});
		},
		list(){
			if (!this.isLogin().hotel_id) {
				this.show = 1;
				return;
			}
			this.req(
				{
					url: 'both/Order',
					data: {
						hid: this.isLogin().hotel_id,
						position: 2,
						todo: 1
					},
					method: 'get'
				},
				res => {
					if (!res.data.data.data) {
						this.lists = [];
						this.show = 2;
						return;
					}
					let orderData = res.data.data.data;
					orderData.forEach(val => {
						val.new_time = moment(val.subscribe_time*1000).format('YYYY-MM-DD HH:mm');
						//修改对应状态，显示按钮，时间
						switch (val.order_state) {
							case 10:
								val.new_order_state = '待接单';
								val.new_btn = '取消订单';
								break;
							case 20:
								val.new_order_state = '待打扫';
								if(val.hotelCancle == 1){
									val.new_btn = '取消订单';
								} 
								break;
							case 30:
								val.new_order_state = '待确认';
								val.new_btn = '确认完成';
								break;
						}
					});
					this.show = false;
					this.lists = orderData;
				}
			);
		}
	},
	components: {
		order
	}
};
</script>

<style scoped lang="scss">
.order{
	background-color: #f8f8f8;
}
.hotel-order {
	width: 750upx;
	.bg{
		width: 100%;
		/* #ifdef APP-PLUS */
		height: 86rpx;
		/* #endif */
		/* #ifndef APP-PLUS */
		height: 86rpx;
		/* #endif */
	}
	.header {
		width: 100%;
		height: 86upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333333;
		font-size: 36upx;
		position: fixed;
		left: 0;
		top: var(--status-bar-height);
		z-index: 99;
		color: #fff;
		background-color: #3595f9;
		border-bottom: 1upx solid #e5e5e5;
	}
	.show2 {
		position: fixed;
		left: 0;
		top: 150upx;
		width: 750upx;
		height: 600upx;
		color: #999;
		font-size: 32upx;
		text-align: center;
		z-index: -999;
		.show_null {
			width: 346upx;
			height: 310upx;
			padding-top:180upx;
			margin: 0 auto;
			image {
				width: 346upx;
				height: 310upx;
			}
		}
	}
	.show1{
		position: fixed;
		left: 0;
		top: 0;
		width: 750upx;
		height: calc(100vh - 250upx);
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		.box{
			.btn{
				margin: 0 auto;
				width: 160upx;
				height: 60upx;
				border: 2upx solid #3595f9;
				border-radius: 8upx;
				text-align: center;
				line-height: 60upx;
				font-size: 28upx;
				margin-top:32upx;
				color:#3595f9;
			}
			image{
				width: 346upx;
				height: 330upx;
			}
		}
	}
}
</style>
